<template>
  <div
    class="index-page">
    <!--轮播展示图片-->
    <Carousel
      :picShows="picShows"></Carousel>

    <!--公司介绍-->
    <div class="company-introduce">
      <div class="left"></div>
      <div class="right clearfix">
        <img
          class="right-img"
          src="@/assets/indexImg/hongdeng.jpg"/>

        <div class="content">
          <el-card shadow="hover">
            <div slot="header" class="title">
              <div class="one">公司简介</div>
              <div class="two">COMPANY INTRODUCTION</div>
            </div>
            <div class="texts">
                {{companyIntroduce}}
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <!--工程展示-->
    <div class="project" :style="peojectDivBackground">
      <div class="title">
        <span>我们的工程展示</span>
      </div>

      <div class="grid-img">
        <div class="a">
          <img :src="imgUrlHead + forProjectShow[0].imgPath" @click="jumpToProject(forProjectShow[0].id)"/>
        </div>
        <div class="b">
          <img :src="imgUrlHead + forProjectShow[1].imgPath" @click="jumpToProject(forProjectShow[1].id)"/>
        </div>
        <div class="c">
          <img :src="imgUrlHead + forProjectShow[2].imgPath" @click="jumpToProject(forProjectShow[2].id)"/>
        </div>
        <div class="d">
          <img :src="imgUrlHead + forProjectShow[3].imgPath" @click="jumpToProject(forProjectShow[3].id)"/>
        </div>
      </div>

    </div>

    <contactUs ></contactUs>

  </div>
</template>

<script>
import Carousel from '@/components/Carousel/index.vue'
import contactUs from '@/components/contactUs/index.vue'
import { getCompanyInfo, getForeProject } from '@/request/api'

export default {
  name: 'index',
  components: {
    Carousel,
    contactUs
  },
  data () {
    return {
      picShows: [
        {
          id: 1,
          url: require('@/assets/carousel/pic1.jpg'),
          title: '重庆渝兴交通设施有限公司',
          content: '八年交通工程经验，车库、道路、交通设施工程的设计、制作、安装和维护',
          imgBackgroundDiv: {
            backgroundImage: 'url(' + require('../assets/carousel/pic1.jpg') + ')',
            backgroundRepeat: 'no-repeat',
            backgroundSize: '100% 100%'
          }
        }
      ],
      companyIntroduce: '',
      peojectDivBackground: {
        backgroundImage: 'url(' + require('../assets/indexImg/projectback.jpg') + ')',

        backgroundRepeat: 'no-repeat',

        backgroundSize: '100% auto'
      },
      endDivBackground: {
        backgroundImage: 'url(' + require('../assets/indexImg/indexEnd.jpg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: '100% auto'
      },
      forProjectShow: [],
      imgUrlHead: 'http://backmanage.yuxjt.com/'
    }
  },
  created () {
    // 获取公司信息，主要获取公司图标
    getCompanyInfo().then(res => {
      this.picShows[0].url = this.imgUrlHead + res.company_indeximg.url_img
      this.picShows[0].title = res.company_indexTitle
      this.picShows[0].content = res.company_indexword
      this.picShows[0].imgBackgroundDiv.backgroundImage = 'url(' + this.imgUrlHead + res.company_indeximg.url_img + ')'
      this.companyIntroduce = res.company_info
    })

    // 获取四个工程
    getForeProject().then(res => {
      this.forProjectShow = res
    })
  },
  methods: {
    jumpToProject (pid) {
      this.$router.push({
        path: '/projectShow',
        query: {
          id: pid
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .index-page {

    .company-introduce {
      width: 100%;
      background-color: #fefffd;
      height: 550px;
      .left {
        height: 100%;
        width: 40%;
        background-color: #1e2432;
        float: left;
      }

      .right {
        .right-img {
          display: block;
          float: left;
          position: relative;
          margin-left: -450px;
          margin-top: 100px;
          width: 550px;
        }

        .content {
          float: left;
          width: 500px;
          margin-left: 60px;
          margin-top: 45px;
          font-family: '微软雅黑','Microsoft YaHei';

          .title {
            .one {
              width: 100%;
              font-size: 30px;
              font-weight: 600;
            }
            .two {
              font-size: 18px;
            }
          }

          .el-card__header {
            border-bottom: 8px solid #ffc001;
          }

          .texts {
            p {
              margin: 0;
            }
            color: rgb(153, 153, 153);
            font-size: 14px;
            line-height: 35px;
          }
        }
      }
    }

    .project {
      width: 100%;
      height: 650px;

      .title {
        text-align: center;
        color: #fff;
        font-size: 37px;
        font-weight: 700;
        line-height: 80px;

        span {
          border-bottom: 8px solid #ffc001;
        }
      }

      .grid-img {
        margin-top: 15px;
        padding: 10px;
        display: grid;
        grid-template-columns: 300px 300px 300px;
        grid-template-rows: 250px 250px;
        height: 500px;   //padding 有个20的宽度
        grid-gap: 10px;
        justify-content: center;
        align-content: center;
        img {
          cursor: pointer;
          width: 100%;
          height: 100%;
        }
        .a {
          grid-column: span 2;
        }
        .d {
          grid-column: span 2;
        }
      }
    }

    .wedo {
      padding-top: 25px;
      width: 100%;
      background-color: #1e2432;
      display: grid;
      grid-template-columns: 300px 300px 300px;
      grid-template-rows: 250px 250px;
      height: 450px;   //padding 有个20的宽度
      grid-gap: 30px;
      justify-content: center;
      align-content: baseline;

      .wedo-left {
        text-align: left;
        color: #ffffff;
        .wedo-title {
          font-size: 37px;
          font-weight: 700;
          border-bottom: 8px solid #ffc001;
        }
        .wedo-decr {
          margin-top: 15px;
          line-height: 25px;
        }
      }

      .wedo-right {
        grid-column: span 2;

        display: grid;
        grid-template-columns: 200px 200px;
        grid-template-rows: 180px 180px;
        grid-gap: 30px;
        justify-content: center;
        padding-top: 10px;
        .pic-card {
          text-align: center;
          color: #ffffff;
        }
      }
    }

    .end-content {
      height: 400px;
      color: #ffffff;
      .end-title {
        font-size: 50px;
        text-align: center;
        line-height: 100px;
      }

      .end-word {
        text-align: center;
        font-size: 30px;
        line-height: 50px;
      }
    }
  }
</style>
